<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍列表2</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">

    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <!--    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />-->
</head>
<style>
    .vip {
        background-image: url("../image/vip.png");
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        background-size: 100%;
    }
</style>
<body style="height:100%;">

<style>


    .modal {
        display: none; /* 默认隐藏 */
        position: fixed; /* 确保弹窗始终在视口内 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        z-index: 100;
    }

    .modal-content {
        background-color: #fff;
        padding: 5px;
        margin: 0 auto; /* 垂直居中 */
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    #container {
        height: 450px
    }

    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }

    #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    #panel .amap-lib-walking {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
    }

    p {
        text-align: center;
    }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    header {
        background-color: #f8f9fa;
        padding: 20px;
        text-align: center;
    }

    .product-container {
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }

    .product-column {
        flex: 1;
        margin-right: 20px;
    }

    .product-column:last-child {
        margin-right: 0;
    }

    .product-item {
        margin-bottom: 20px;
        margin-top: 70px;
        border: 1px solid #ddd;
        border-radius: 30px;
        padding: 10px;
        text-align: center;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    }

    .product-item img {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    }

    .product-item h3 {
        font-size: 16px;
        margin: 0;

    }

    .product-item p {
        font-size: 15px;
        margin: 5px 0;
    }

    footer {
        background-color: #f8f9fa;
        padding: 20px;
        text-align: center;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>
<!--导航-->
<!--inverted:反色、attached:没有圆角，依附在上面:m-padded-tb-mini:m自己定义,padded,上下之间内部间隔,tb上下,mini小点-->
<!--m-shadow-small:自定义导航阴影-->
<!--导航-->


<nav class="ui m-bg attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <h2 class="ui purple header item">书籍列表</h2>
            <a href="#" th:href="@{/index}" class="m-item item m-mobile-hide m-black"><i class=" user secret icon"></i>首页</a>
            <a href="#" th:href="@{/books}" class="active m-item item m-mobile-hide m-black"><i
                    class="user secret icon"></i>图书信息</a>
            <a href="#" th:href="@{/goodBooks}" class="m-item item m-mobile-hide m-black"><i
                    class="user secret icon"></i>推荐好书</a>
            <a href="#" th:href="@{/borrow}" class="m-item item m-mobile-hide m-black"><i class="users secret icon"></i>我的借阅</a>
            <a href="#" th:href="@{/alter}" class="m-item item m-mobile-hide m-black"><i class="users secret icon"></i>个人中心</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown  item">
                    <div class="text">
                        <i class="user plus icon " style="width: 20px;height: 20px"></i>
                        <i th:if="${userMessage.getVip()!=0}" class="vip" style="width: 20px;height: 20px"></i>
                        <label th:text="${userMessage.getStuname()}"></label>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/alter}" class="item">修改信息</a>
                        <a href="#" th:href="@{/logouts}" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--<button id="openModalBtn">打开弹窗</button>-->

<div class="modal" id="myModal">
    <div class="modal-content">
        <div>

            <div id="container"></div>
            <div id="panel"></div>

            <div class="input-card">
                <h4>左击获取经纬度：</h4>
                <div class="input-item" style="width: 100%">
                    <input style="width: 60%" type="text" readonly="true" id="lnglat">
                </div>
            </div>

        </div>

        <button id="closeModalBtn" style="position: absolute;right: 0;bottom: 10px" class="ui tiny grey button">
            关闭弹窗
        </button>
        <button onclick="submit()" style="position: absolute;right: 100px;bottom: 10px" class="ui tiny primary button">
            修改坐标
        </button>


    </div>
</div>


<!--中间内容-->
<div class="m-container-small m-padded-tb-big animated zoomIn">
    <div class="ui container">


        <!--            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">-->
        <!--                <i class="close icon"></i>-->
        <!--                <div class="header">提示：</div>-->
        <!--                <p th:text="${message}">恭喜，借阅成功！</p>-->
        <!--            </div>-->
        <a href="#" th:href="@{/geo/search}" class="m-item item m-mobile-hide m-black"></i>当前定位经纬度</a>
        <a href="#" th:text="${lng}"></i></a>
        <a href="#" th:text="${lat}"></i></a>


        <div id="table-container">
            <div class="product-container">

                <div class="product-item" th:each="shelf : ${allShelf}">
                    <table style="border-spacing: 15px;font-size:22px;text-align:center;
                        font-family:Georgia, 'Times New Roman', Times, serif;;
                        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加黑色阴影 */  ">

                        <tr>
                            <td>序号：</td>
                            <td th:text="${shelf.getShelfId()}"></td>
                        </tr>
                        <tr>
                            <td>名称：</td>
                            <td th:text="${shelf.getShelfName()}"></td>
                        </tr>
                        <tr>
                            <td>距离：</td>
                            <td th:text="${shelf.getShelfId() > 3 ? 4 : 5}">米</td>
                        </tr>
                        <tr>
                            <td>经度：</td>
                            <td th:text="${shelf.getLng() }"></td>
                        </tr>
                        <tr>
                            <td>纬度：</td>
                            <td th:text="${shelf.getLat()}"></td>
                        </tr>
                        <tr>
                            <td colspan="2"><a th:href="${shelf.getNewUrl()}"
                                               class="active m-item item m-mobile-hide m-black"
                                               style="text-align: center;"><i class="user secret icon"
                                                                              style="color: #0000C0"></i>查看</a></td>
                        </tr>
                        <tr>
                            <td colspan="2" th:onclick="|local(${shelf.getShelfId()})|">修改位置</td>
                        </tr>
                        <tr>


                            <td colspan="2" th:onclick="testDistance([[${shelf.getLat()}]],[[${shelf.getLng()}]])">
                                测算距离
                            </td>

                        </tr>

                    </table>
                </div>
            </div>

            <!--                <table  class="ui celled table">-->
            <!--                    <thead>-->
            <!--                    <tr>-->
            <!--                        <th>序号</th>-->
            <!--                        <th>书柜名称</th>-->
            <!--                        <th>距离</th>-->
            <!--                        <th>操作</th>-->
            <!--                    </tr>-->
            <!--                    </thead>-->
            <!--                    <tbody>-->
            <!--                    <tr th:each="shelf,iterStat:${allShelf}">-->
            <!--                        <td th:text="${shelf.getShelfId()}"></td>-->
            <!--                        <td th:text="${shelf.getShelfName()}"></td>-->
            <!--                        <td th:text="${shelf.getShelfId() > 3 ? 4 : 5}">米</td>-->
            <!--                        &lt;!&ndash;                            <td><button  type="submit" id="searchE-btn" class="ui purple basic button"><i class="search icon"></i>查看</button></td>&ndash;&gt;-->
            <!--                        <td><a th:href="${shelf.getNewUrl()}" class="active m-item item m-mobile-hide m-black"><i class="user secret icon"></i>查看</a></td>-->
            <!--                    </tr>-->

            <!--                    </tbody>-->
            <!--                    <tfoot>-->
            <!--                    <tr>-->
            <!--                        <th colspan="6" >-->
            <!--                            <div class="ui mini pagination menu" th:if="${pageInfo.total}>1">-->
            <!--                            </div>-->
            <!--                        </th>-->
            <!--                    </tr>-->
            <!--                    </tfoot>-->
            <!--                </table>-->
            <!--                    <div class="product-container" >-->
            <!--                        <div class="product-column" th:each="shelf : ${allShelf}">-->
            <!--                                <p th:text="${shelf.shelfName}"></p>-->
            <!--                                <div class="product-item" th:each="book : ${shelf.books}" >-->
            <!--                                    <img th:src="${book.img}" />-->
            <!--                                    <h3 th:text="${book.name}"></h3>-->
            <!--                                    <p th:text="${book.price}"></p>-->
            <!--                                    <button>借阅</button>-->
            <!--                                </div>-->
            <!--                                更多<p th:text="${shelf.shelfName}"></p>书架的数-->
            <!--                            </div>-->
            <!--                    </div>-->

        </div>
    </div>
</div>
<br>
<br>
<!--底部footer-->
<footer th:fragment="footer" class="ui m-bg animated fadeInUp inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                </div>
            </div>
            <div class="three wide column">
                <div id="newblog-container">
                </div>
            </div>
            <div class="three wide column">

            </div>
        </div>
        <div class="ui inverted m-black section divider"></div>
    </div>
</footer>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'd47caf74793f4bcf620ea46672ff66d9',
    }
</script>
<!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d327f163a9ec4c518cdb2b813c6f7d11"></script>-->
<script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=M4yUfoK2zZW9O5ALeSIvtNmIHkBuE5Y2"></script>
<!--<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/js/colourBar.js" th:src="@{/js/colourBar.js}" tppabs="../static/js/colourBar.js"></script>
<script th:inline="javascript">
    // console.log([[${message}]])
    var message = [[${message}]];

    var selfLng = [[${lng}]]; // 即可获取
    var selfLat = [[${lat}]]; // 即可获取


    $(document).ready(function () {
        // 打开弹窗
        $("#openModalBtn").click(function () {
            $("#myModal").fadeIn();
        });

        // 关闭弹窗
        $("#closeModalBtn").click(function () {
            $("#myModal").fadeOut();
        });

        // 点击模态框外部区域也关闭弹窗
        $(window).click(function (event) {
            if (event.target.id === 'myModal') {
                $("#myModal").fadeOut();
            }
        });

        // 按下 Esc 键关闭弹窗
        $(document).keyup(function (event) {
            if (event.key === 'Escape') {
                $("#myModal").fadeOut();
            }
        });
    });


    if (message != null) {
        alert(message)
    }

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('.ui.modal')
        .modal()
    ;
    //消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });

    function page(obj) {
        $("[name='pageNum']").val($(obj).data("page"));//获取page隐含域赋值
        loaddata();
    }

    // 点击事件；page清零，搜索不会查询某一页
    $("#search-btn").click(function () {
        // $("[name='pageNum']").val(0);
        loaddata();
    });

    //用来请求发送数据
    function loaddata() {
        console.log("templates-loaddata")
        $("#table-container").load(/*[[@{/books/search}]]*/"/books1/search", {
            bookId: $("[name='bookId']").val(),
            name: $("[name='name']").val(),
            pageNum: $("[name='pageNum']").val()
        });
    }

    function submit() {
        console.log("---")
        $('.ui.modal')
            .modal('hide')
        ;

        $.ajax({

            url: "http://localhost:8080/book/shelf/" + localStorage.getItem("shelfId") + "/" + localStorage.getItem("lng") + "/" + localStorage.getItem("lat"),
            method: "GET",
            success: function (response) {
                location.reload(true);
            },
            error: function (error) {
                console.log("Error : ", error);
            }
        });

    }


    function local(id) {
        localStorage.setItem("shelfId", id);
        $("#myModal").fadeIn();
    }

    var map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(selfLng, selfLat), 11);
    map.enableScrollWheelZoom(true);
    map.addEventListener('click', function (e) {
        console.log(e)
        document.getElementById("lnglat").value = e.latlng.lng + ',' + e.latlng.lat
        localStorage.setItem("lng", e.latlng.lng)
        localStorage.setItem("lat", e.latlng.lat)
    });
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);


    function testDistance(lat, lng) {
        $("#myModal").fadeIn();


        map.centerAndZoom(new BMapGL.Point(selfLng, selfLat), 11);

        var p1 = new BMapGL.Point(lng, lat);
        var p2 = new BMapGL.Point(selfLng, selfLat);

        var driving = new BMapGL.DrivingRoute(map, {
            renderOptions: {map: map, autoViewport: true},

        });
        var myIcon = new BMapGL.Icon("../image/Mario.png", new BMapGL.Size(30, 33));
        var marker = new BMapGL.Marker(p2, {
            icon: myIcon
        });
        driving.setMarkersSetCallback(function (result) {
            map.removeOverlay(result[0].marker);
        })

// 将标注添加到地图
        map.addOverlay(marker);
        driving.search(p2, p1);
        $("#myModal").fadeIn();
        console.log([[${lng}]])
    }
</script>
<script src="../static/js/colourBar.js" th:src="@{/js/colourBar.js}" tppabs="../static/js/colourBar.js"></script>


</body>
</html>
